import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AppleOutlined, PicRightOutlined } from '@ant-design/icons-vue';
import { RouterView } from 'vue-router';
import router from '@/router';

export default defineComponent({
    components: {
        MailOutlined,
        AppstoreOutlined,
        SettingOutlined,
        AppleOutlined,
        PicRightOutlined,
    },
    setup() {
        const state = reactive<any>({
            rootSubmenuKeys: ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6',],
            // openKeys: ['sub1'],
            openKeys: [''],
            selectedKeys: [],
        });
        const onOpenChange = (openKeys: string[]) => {
            const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
            if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
                state.openKeys = openKeys;
            } else {
                state.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
        };
        const handleClick = (e: any) => {
            state.selectedKeys = e.keyPath;
        };
        onMounted(() => {
            state.selectedKeys.push(router.currentRoute.value.name)
        })
        return () => (
            <>
                <div class="flex flex-row">
                    <a-menu
                        style="width: 256px;height:100vh"
                        mode="inline"
                        openKeys={state.openKeys}
                        selectedKeys={state.selectedKeys}
                        onOpenChange={onOpenChange}
                        // theme="dark"
                        inlineIndent={30}
                        onClick={handleClick}
                    >
                        <a-menu-item key="sub1" v-slots={{
                            icon: () => (<PicRightOutlined />)
                        }}>
                            <router-link to="/Main">首页</router-link>
                        </a-menu-item>
                        <a-menu-item key="sub2" v-slots={{
                            icon: () => (<PicRightOutlined />)
                        }}>
                            <router-link to="/SetUp">设置</router-link>
                        </a-menu-item>
                        <a-menu-item key="sub3" v-slots={{
                            icon: () => (<PicRightOutlined />)
                        }}>
                            <router-link to="/Edit">编辑</router-link>
                        </a-menu-item>
                        <a-menu-item key="sub5" v-slots={{
                            icon: () => (<PicRightOutlined />)
                        }}>
                            <router-link to="/Tabs">标签页</router-link>
                        </a-menu-item>

                        <a-sub-menu key="sub33" v-slots={{
                            title: () => (
                                <span>自定义封装组件</span>
                            ),
                            icon: () => (
                                <MailOutlined></MailOutlined>
                            ),
                        }}>
                            <a-menu-item key="1">
                                <router-link to="/Button">自定义按钮</router-link>
                            </a-menu-item>
                            <a-menu-item key="2">
                                <router-link to="/SetUp">设置</router-link>
                            </a-menu-item>
                            <a-menu-item key="3">Option 4</a-menu-item>
                        </a-sub-menu>
                        <a-sub-menu key="sub4" v-slots={{
                            title: () => (
                                <span>Navigation Tow</span>
                            ),
                            icon: () => (
                                <MailOutlined></MailOutlined>
                            ),
                        }}>
                            <a-menu-item key="4">Option 2</a-menu-item>
                            <a-menu-item key="5">Option 3</a-menu-item>
                            <a-menu-item key="6">Option 4</a-menu-item>
                        </a-sub-menu>


                    </a-menu>
                    <div class="w-full max-h-screen overflow-auto">
                        <RouterView></RouterView>
                    </div>
                </div >
            </>
        );
    },
});